<style lang="scss" scoped>
	.container{
		padding: 30rpx 0 0 0;
	}
	.swiperBanner {
		width: 100vw;
		height: 340rpx;
		padding: 0rpx 30rpx;
		margin-bottom: 30rpx;

		swiper {
			width: 100%;
			height: 100%;

			&-item {
				width: 100%;
				height: 100%;

				.picture {
					width: 100%;
					height: 100%;
					border-radius: 10rpx;
				}
			}
		}
	}

	.notice {
		width: 690rpx;
		height: 80rpx;
		margin: 0rpx 30rpx;
		background-color: #F9F9F9;
		border-radius: 40rpx;
		display: flex;
		align-items: center;
		font-size: 26rpx;
		margin-bottom: 30rpx;

		.left {
			width: 130rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			color: #23B68E;
		}

		.content {
			flex: 1;
			display: flex;
			align-items: center;
			color: #666;


			swiper {
				width: 100%;
				height: 80rpx;

				&-item {
					width: 100%;
					height: 100%;
					display: flex;
					align-items: center;
					overflow: hidden;
					white-space: nowrap;
					text-overflow: ellipsis;
				}
			}
		}

		.right {
			width: 80rpx;
			display: flex;
			justify-content: center;
			align-items: center;
		}
	}

	.select {
		height: 530rpx;
		width: 100%;

		scroll-view {
			padding: 0 0 0 30rpx;
			height: 440rpx;
			white-space: nowrap;

			.item {
				display: inline-block;
				margin-right: 10rpx;

				&:last-child {
					margin-right: 60rpx;
				}

				.picture {
					width: 200rpx;
					height: 440rpx;
					border-radius: 10rpx;
				}
			}
		}

	}

	.theme {
		padding-bottom: 50rpx;

		.themeItem {
			padding: 0 30rpx;
			display: grid;
			gap: 15rpx;
			grid-template-columns: repeat(3, 1fr);
		}
	}
</style>

<template>
	<view class="container pageBg">
		<view class="swiperBanner">
			<swiper :indicator-dots="true" indicator-color='rgba(255,255,255,0.5)' indicator-active-color='#fff'
				:autoplay="true" :interval="3000" :duration="1000" circular>
				<swiper-item v-for="item in 3">
					<image class="picture" src=" ../../common/images/banner2.jpg" mode="aspectFill"></image>
				</swiper-item>
			</swiper>
		</view>
		<view class="notice">
			<view class="left">
				<uni-icons type='sound-filled' size="20" color="#23B68E"></uni-icons> 公告
			</view>
			<view class="content">
				<swiper vertical autoplay :interval="3000" :duration="1000" circular>
					<swiper-item v-for="item in 3">

						这是一条公告
					</swiper-item>
				</swiper>
			</view>
			<view class="right">
				<uni-icons type="right" size="18" color="#888"></uni-icons>
			</view>
		</view>
		<view class="select">
			<CommonTitle>
				<template #title>每日推荐</template>
				<template #custom>
					<uni-icons type="calendar" size="18" color="#23B68E"></uni-icons>
					<uni-dateformat :date="Date.now()" format="dd"></uni-dateformat>号
				</template>
			</CommonTitle>
			<scroll-view scroll-x>
				<view class="item" v-for="item in 6">
					<image class="picture" src="../../common/images/preview1.jpg" mode=""></image>
				</view>
			</scroll-view>
		</view>
		<view class="theme">
			<CommonTitle>
				<template #title>专题精选</template>
				<template #custom>
					More+
				</template>

			</CommonTitle>
			<view class="themeItem">
				<ThemeItem v-for="item in 8">
				</ThemeItem>
				<ThemeItem :isMore='true'></ThemeItem>
			</view>
		</view>
	</view>
</template>

<script setup>

</script>